<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <meta name="author" content="Script Tutorials" />
        <title>How to create Pinterest-like script - step 6 | Script Tutorials</title>
        <!-- add styles -->
 		<link href="<?php echo base_url(); ?>theme_infinitescroll/css/main.css" rel="stylesheet" type="text/css" />
        <link href="<?php echo base_url(); ?>theme_infinitescroll/css/colorbox.css" rel="stylesheet" type="text/css" />
         
         <!-- GENERAL URLS START-->
<!--    <link rel="stylesheet" href="<?php echo base_url(); ?>public/css/colorbox.css" />
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<script src="<?php echo base_url(); ?>public/js/jquery.colorbox.js"></script>
		<script>
			$(document).ready(function(){
				$(".ajax").colorbox();
			});
		</script>-->
         <!-- GENERAL URLS END-->
         

  
<!-- MASONARY START -->
<!-- REF : MASONARY WEBSITE 
LINK http://desandro.github.io/masonry/demos/infinite-scroll.html

style.css can be edited and removed infuture
-->

<link rel="stylesheet" href="<?php echo base_url(); ?>public/infinitescroll/css/style.css" />	
<!--<script src="<?php echo base_url(); ?>public/infinitescroll/js/modernizr-transitions.js"></script>
<script src="<?php echo base_url(); ?>public/infinitescroll/js/jquery-1.6.1.min.js"></script>
<script src="<?php echo base_url(); ?>public/infinitescroll/js/jquery.masonry.js"></script>
<script src="<?php echo base_url(); ?>public/infinitescroll/js/jquery.infinitescroll.min.js"></script>-->

<script src="<?php echo base_url(); ?>theme_infinitescroll/js/js/jquery.min.js"></script>
<script src="<?php echo base_url(); ?>theme_infinitescroll/js/js/jquery.colorbox-min.js"></script>
<script src="<?php echo base_url(); ?>theme_infinitescroll/js/js/jquery.masonry.min.js"></script>
<script src="<?php echo base_url(); ?>theme_infinitescroll/js/js/jquery.infinitescroll.min.js"></script>
<script src="<?php echo base_url(); ?>theme_infinitescroll/js/js/script.js"></script>
<script src="<?php echo base_url(); ?>public/infinitescroll/js/modernizr-transitions.js"></script>

<script>
$(window).ready(function(){
	
    var $container = $('#container');
    $container.imagesLoaded(function(){
      $container.masonry({
        itemSelector: '.pin',
        columnWidth: 10,
        isAnimated: !Modernizr.csstransitions
      });
    });
    
    $container.infinitescroll({
      navSelector  : '#page-nav',    // selector for the paged navigation 
      nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
      itemSelector : '.pin',     // selector for all items you'll retrieve
      donetext  : 'No more pages to load.',
      loadingImg : 'http://i.imgur.com/6RMhx.gif',
      debug: false,
      errorCallback: function() { 
        // fade out the error message after 2 seconds
        $('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal');   
      }
      },
      // call Masonry as a callback
      function( newElements ) {
        var $newElems = $( newElements );
        // position elements at the bottom center
        $newElems.css({
          left: $container.width() / 2,
          top: $container.height(),
        })
        
        // pause so it appears new items get added from bottom 
        setTimeout( function(){
          // ensure that images load before adding to masonry layout
          $newElems.imagesLoaded(function(){
            $container.masonry( 'appended', $newElems ); 
          });
          
        }, 10 );
        
      }
    );
    
  });
</script>
<!-- MASONARY END-->
    </head>
    <body>

        <!-- header panel -->
        <div class="header_panel">

            <!-- logo -->
            <a href="index.php" class="logo1" style="font-family: 'Pacifico', cursive;font-weight: normal;font-size: 30px;color: #00b7c2;margin-left: 336px;">Photogallery</a>

            <!-- search form -->
            <form action="" method="get" class="search">
                <input autocomplete="off" name="q" size="27" placeholder="Search" type="text" />
                <input name="search" value="search" type="submit" />
            </form>

            <!-- navigation menu -->
            <ul class="nav">
                <li>
                    <a href="#">About<span></span></a>
                    <ul>
                        <li><?php echo $home_url;?></li>
                        <li><?php echo $register_url;?></li>
                        <li><?php echo $login_url;?></li>
                        <li class="div"><?php echo $editprofile_url;?></li>
                        <li><?php echo $search_url;?></li>
                        <li><?php echo $logout_url;?></li>
                        <li class="div"><a href="#">Terms of Service</a></li>
                        <li><a href="#">Privacy Policy</a></li>
                        <li><a href="#">Copyright</a></li>
                        <li><a href="#">Trademark</a></li>
                        
                        
                        
                        
                      
                        
                        
                        
                        
                        
                    </ul>
                </li>
                {menu_elements}
                <li>
                    <a href="http://www.script-tutorials.com/pinterest-like-script-step-6/">Back to tutorial</a>
                </li>
            </ul>

        </div>
